<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>视频播放量数据分析</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Bootstrap Core CSS -->
    <link th:href="@{/boostrapTemplatResources/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link th:href="@{/boostrapTemplatResources/vendor/metisMenu/metisMenu.min.css}" rel="stylesheet">

    <!-- Custom CSS -->
    <link th:href="@{/boostrapTemplatResources/dist/css/sb-admin-2.css}" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link th:href="@{/boostrapTemplatResources/vendor/morrisjs/morris.css}" rel="stylesheet">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/webjars/jquery/3.1.1/jquery.js"></script>
    <script src="/js/sweetAlert.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div th:include="admin/header::header"></div>
    <div th:include="admin/sidebar::sidebar"></div>
</nav>



<div id="wrapper">
    <!-- 主界面显示D站介绍信息 -->
    <div id="page-wrapper">
        <table id="table"  class="table table-bordered">
            <thead>
            <tr>

                <th>分析图表</th>
            </tr>
            </thead>
            <tbody>
            <tr >
                <td ><div  id="main" style="width: 1000px;height: 600px;background-color: white"></div> </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script src="/js/echarts.min.js"></script>

<script type="text/javascript">
    var dataAxis =[];
    var data =[];
    var yMax = 500;
    var dataShadow = [];
    // 直接页面写的调用ajax的方法
    function callbackFn(myChart,jsonURL){
        $.ajax({
            url:jsonURL,
            dataType:"json",
            success:function(jsonData){
                dataAxis=jsonData.categories;
                data=jsonData.data;

                myChart.setOption({
                    title:{
                        text:jsonData["title"]
                    },
                    xAxis: {
                        data: jsonData.categories,
                        axisLabel: {
                            inside: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        z: 10
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#999'
                            }
                        }
                    },
                    dataZoom: [
                        {
                            type: 'inside'
                        }
                    ],
                    series: [
                        { // For shadow
                            type: 'bar',
                            itemStyle: {
                                color: 'rgba(0,0,0,0.05)'
                            },
                            barGap: '-100%',
                            barCategoryGap: '40%',
                            data: dataShadow,
                            animation: false
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#2378f7'},
                                            {offset: 0.7, color: '#2378f7'},
                                            {offset: 1, color: '#83bff6'}
                                        ]
                                    )
                                }
                            },
                            data: jsonData.data
                    }]
                });
                // 设置加载等待隐藏
                myChart.hideLoading();
            }
        });
    }
    var zoomSize = 6;
    myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
    });
    // 初始化echar报表的方法
    function initReport(myChart){

        // 显示标题，图例和空的坐标轴
        myChart.setOption({

            tooltip: {},
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '点击量',
                type: 'bar',
                data: []
            }]
        });
    }

    function createTestReport(showDivId,jsonURL){
        var myChart = echarts.init(document.getElementById(showDivId));
        // 初始化report对象
        initReport(myChart);
        myChart.showLoading({text: '正在努力的读取数据中...'  });
        // 调用后台获取json数据
        callbackFn(myChart,jsonURL);
    }
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var showDivId = 'main';
        var jsonURL = "/history/analysisByTimes";
        createTestReport(showDivId,jsonURL);
    });
</script>
</body>
</html>